<template>
  <div v-if="canShowPage" id="menuList">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="searchList"></topSearch>
    <div class="table-conBtn">
      <!-- v-if="powerAry.includes('system:menu:add')" -->
      <el-button
        v-permission="'wh:system:menu:add'"
        type="warning"
        icon="el-icon-plus"
        @click="addEditMenu('add')"
      >
        新增
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="menuId"
      stripe
      :tree-props="{ children: 'children', hasChildren: 'children.length > 0' }"
    >
      <el-table-column prop="menuName" label="菜单名称" width="250">
        <template slot-scope="scope">
          <i :class="scope.row.icon ? scope.row.icon : ''"></i>
          {{ scope.row.menuName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="url"
        label="请求地址"
        width="250"
      ></el-table-column>
      <el-table-column prop="address" label="类型">
        <template slot-scope="scope">
          <span
            :class="['tag-span', filterType(scope.row.menuType).colorStyle]"
          >
            {{ filterType(scope.row.menuType).showName }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="address" label="可见">
        <template slot-scope="scope">
          <span
            v-if="scope.row.visible"
            class="tag-span"
            :class="scope.row.visible | filterClass('hideShow')"
            >{{ scope.row.visible | filterName('hideShow') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="perms"
        label="权限标识"
        width="250"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="230">
        <template slot-scope="scope">
          <!-- v-if="powerAry.includes('system:menu:edit')" -->
          <el-button
            v-permission="'wh:system:menu:edit'"
            type="text"
            @click="addEditMenu('edit', scope.row.menuId)"
          >
            编辑
          </el-button>
          <!-- v-if="powerAry.includes('system:menu:remove')" -->
          <el-button
            v-permission="'wh:system:menu:remove'"
            type="text"
            @click="handledelMenu(scope.row.menuId)"
          >
            删除
          </el-button>
          <el-button type="text" @click="addEditMenu('add', scope.row)">
            添加下级菜单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增/编辑角色dialog -->
    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="searchList"
    ></dialogAddEdit>
  </div>
</template>

<script>
import { getMenuList, delMenu } from '@/api/system/menu' // 接口
import topSearch from '@component/system/menu/topSearch' // 上部搜索条件
import dialogAddEdit from '@component/system/menu/dialogAddEdit' // 新增/编辑
export default {
  name: 'menuList',
  msg: '菜单管理',
  components: {
    topSearch,
    dialogAddEdit
  },
  data() {
    return {
      loading: false,
      defaultAll: false,
      tableData: [], // table内容
      formInline: {
        // 搜索条件
        menuName: '', // 菜单名称
        visible: '' // 菜单状态,默认所有
      },
      dialogData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        params: '' // 编辑时，传递的参数
      },
      multipleSelection: [],
      powerStr: 'system:menu:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  mounted() {
    // 获取权限
    // this.getPower()
  },
  methods: {
    filterType(type) {
      let obj = {
        showName: '',
        colorStyle: ''
      }
      switch (type) {
        case 'M':
          obj.showName = '目录'
          obj.colorStyle = 'primary'
          break
        case 'C':
          obj.showName = '菜单'
          obj.colorStyle = 'success'
          break
        case 'F':
          obj.showName = '按钮'
          obj.colorStyle = 'warning'
          break
      }
      return obj
    },
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
        this.searchList()
      })
    },
    /* 获取列表 */
    searchList() {
      if (!this.canGetList) return
      this.loading = true
      let obj = { ...this.formInline }
      getMenuList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    // 新增/编辑/添加下级菜单
    addEditMenu(type, params = null) {
      this.dialogData.isShow = true
      this.dialogData.type = type
      // type='add',params有内容时，为“添加下级菜单”。params为对象
      // type='edit',为“编辑”。params为Number类型id
      this.dialogData.params = params
    },
    // 删除
    handledelMenu(id) {
      this.$confirm('确认删除该菜单?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMenu(
          id,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message.warning(response.message)
          }
        )
      })
    }
  }
}
</script>

<style lang="less">
#menuList {
  .el-table {
    tr {
      th {
        &:first-child {
          padding-left: 20px;
        }
      }
      td {
        &:first-child {
          .cell {
            padding-left: 20px;
          }
        }
      }
    }
  }
}
</style>
